﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="bigpictrue.aspx.cs" Inherits="WebApplication.admin.BigPictrue" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>首页图片管理</title>
<meta http-equiv="x-ua-compatible" content="ie=7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../scripts/script.js"></script>
<style type="text/css">
.image{ width:100px;height:102px; float:left;border:1px solid silver; margin:0px 0px 12px 12px;padding:2px;overflow:hidden}
.image img{width:100px;height:75px;margin-bottom:4px;}
#zoom{position:absolute;border:1px solid silver;padding:2px;background-color:white}
#zoom img {width:480px;height:360px}
</style>
<script type="text/javascript">
function zoom(e, out) {
    if (out) {
        var p = $(e).pos();
        $('zi').src = e.src;
        $('zoom').show().moveTo(p.left - 2, p.top - 2);
    }
    else $('zoom').hide();
}
</script>
</head>
<body>
<% if(isadd) { %>
<div class="root page-nav"><a href="?do=list">返回图片列表</a></div>
<form class="form root" method="post" action="?do=save" enctype="multipart/form-data">
    <h3>上传首页大图</h3>
    <div class="item"><label>选择图片：</label><input type="file" name="file" id="file" class="text" /></div>
    <div class="item"><label>图片预览：<br /><br />说明：首页大图<br />宽高比例16:9<br />最佳尺寸<br />960*540px
        </label><div id="pre" class="preview" style="width:486px;height:276px"></div></div>
    <div class="item"><label>&nbsp;</label><input type="submit" value="保存" /></div>
</form>
<script type="text/javascript" src="../scripts/qsl.ui.imagepreview.js"></script>
<script type="text/javascript" src="../scripts/qsl.validate.net.js"></script>
<script type="text/javascript">
    var ip = new ImagePreview('pre', 480, 270, { input: 'file' });
    //new FormChecker([['file', '请选择图片']]);
</script>
<% } else { %>
<div id="zoom" style="display: none" onmouseout="zoom(null,false)"><img src="../images/s.gif" alt="" id="zi" /></div>
<div class="root page-nav"><a href="?do=add">添加图片</a></div>
<form action="?do=edit" method="post">
<asp:repeater runat="server" id="i_list">
    <itemtemplate>
<div class="image">
    <img src="/upload/screen/<%# DataBinder.Eval(Container.DataItem,"GUID") %>.jpg" onmouseover="zoom(this, true)" />
    <input name="i_<%# DataBinder.Eval(Container.DataItem,"Id") %>" type="text" class="text" value="<%# DataBinder.Eval(Container.DataItem,"Sort")%>" onblur="if(isNaN(this.value))this.value=this.defaultValue" onfocus="select()" size="2" maxlength="2" style="ime-mode:disabled;text-align:center" />
    <a href="?do=delete&id=<%# DataBinder.Eval(Container.DataItem,"Id") %>" onclick="return confirm('确定删除这张图片？')">删除</a>
</div>
    </itemtemplate>
</asp:repeater>
<div class="clear" style="padding-left: 12px; border-top: 1px dashed silver">
    <p style="margin: 4px">说明：排序的数值越小，该图片显示的次序就越靠前。</p>
    <input type="submit" class="btn" value="保存排序" />
</div>
</form>
<% } %>
</body>
</html>
